<script setup>
import { ref } from 'vue';
import {save_only, confirm_message, handle_get_cards} from '@/api/member.js'
const processStatus = ref("finish")
const activeStep = ref(0);
// 表单数据模型
const form = ref({
	name: '',
	sex: '',
	birthday: '',
	phone: '',
	note: ''
});

// 表单引用
const formRef = ref(null);

// 保存会员信息，暂不绑定会员卡
const saveOnly = (step) => {
	console.log(form.value);
	save_only(form.value).then(res => {
		console.log(res.data.data.id);
		selectedCard.value.memberId = res.data.data.id
		activeStep.value = step
		processStatus.value = 'success'
		clearFormData()
	})
}

const props = defineProps({
	closeDrawer: Function,
	handlePageChange: Function
})
// 取消
function cancel() {
	props.closeDrawer(false)
	console.log('关闭抽屉')
	activeStep.value = 0
	props.handlePageChange(1)
}

// 发送绑定信息到后端
function confirm() {
	console.log(selectedCard.value);
	confirm_message(selectedCard.value).then(res => {
		activeStep.value = 2
		processStatus.value = 'success'
	})
}

// 定义一个响应式变量，用于存放会员卡信息
const cards = ref([])

// 定义一个响应式变量，用于存放用户进行绑定的信息
const selectedCard = ref({
	memberId: 0,
	cardId: 0,
	validCount: '', // 充值次数
	validDay: '', // 有效期(天数)
	receivedMoney: '', // 实收金额
	payMode: '', // 选择支付方式
	note: '' // 备注
})

// 支付方式
const paymentMethods = ([
	{ id: 1, name: '微信支付' },
	{ id: 2, name: '支付宝' },
	{ id: 3, name: '现金' },
	{ id: 4, name: '银行卡' }
])

// 向后端查询会员卡信息
const handleGetCards = () => {
	console.log('正在获取会员卡信息');
	handle_get_cards().then(res => {
		cards.value = res.data.data
	})
}


// 清空表单数据
function clearFormData() {
	form.value = {
		name: '',
		sex: '',
		birthday: '',
		phone: '',
		note: ''
	};
}
</script>

<template>
	<div>
		<!-- 步骤指示器 -->
		<el-steps :active="activeStep" :process-status="processStatus" finish-status="success">
			<el-step title="填写基本信息" />
			<el-step title="绑定会员卡" />
			<el-step title="完成" />
		</el-steps>

		<div v-show="activeStep == 0">
			<!-- 表单 -->
			<el-form ref="formRef" :model="form" label-width="120px" class="demo-ruleForm">
				<el-form-item label="会员姓名" prop="name">
					<el-input v-model="form.name" placeholder="请输入会员姓名"></el-input>
				</el-form-item>

				<el-form-item label="性别" prop="sex">
					<el-radio-group v-model="form.sex">
						<el-radio label="男">男</el-radio>
						<el-radio label="女">女</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="出生日期" prop="birthday">
					<el-date-picker v-model="form.birthday" type="date" placeholder="请选择出生日期"></el-date-picker>
				</el-form-item>

				<el-form-item label="手机号码" prop="phone">
					<el-input v-model="form.phone" placeholder="请输入手机号码"></el-input>
				</el-form-item>

				<el-form-item label="备注" prop="note">
					<el-input v-model="form.note" type="textarea" placeholder="请输入备注"></el-input>
				</el-form-item>

				<!-- 操作按钮 -->
				<el-form-item>
					<el-button type="primary" @click="saveOnly(1)">保存,为该会员绑定会员卡</el-button>
					<el-button @click="saveOnly(2)">保存会员信息,暂不绑定会员卡</el-button>
					<el-button @click="cancel">取消</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div v-show="activeStep == 1">
			<!-- 表单 -->
			<el-form label-width="120px" class="demo-ruleForm">
				<el-form-item label="选择会员卡">
					<el-select v-model="selectedCard.cardId" placeholder="请选择会员卡" @click="handleGetCards()">
						<el-option v-for="(item, index) in cards" :key="index" :label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="充值次数">
					<el-input v-model.number="selectedCard.validCount" placeholder="请输入充值次数"></el-input>
				</el-form-item>

				<el-form-item label="有效期">
					<el-input v-model.number="selectedCard.validDay" placeholder="请输入有效期(天数)"></el-input>
				</el-form-item>

				<el-form-item label="实收金额">
					<el-input v-model.number="selectedCard.receivedMoney" placeholder="请输入实收金额"></el-input>
				</el-form-item>

				<el-form-item label="选择支付方式">
					<el-select v-model="selectedCard.payMode" placeholder="请选择支付方式">
						<el-option v-for="(item, index) in paymentMethods" :key="index" :label="item.name"
							:value="item.name"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="备注" prop="note">
					<el-input v-model="form.note" type="textarea" placeholder="请输入备注"></el-input>
				</el-form-item>

				<!-- 操作按钮 -->
				<el-form-item>
					<el-button type="primary" @click="confirm">确认</el-button>
					<el-button @click="cancel">取消</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div v-show="activeStep == 2">
			<el-alert title="会员注册成功！" type="success" description="点击下方按钮返回会员界面" center="true" closeable="false"
				show-icon />
			<el-button @click="cancel">回到会员页</el-button>
		</div>
	</div>
</template>

<style scoped></style>